<template>
  <!-- html -->
  <div class="app">
    <!-- <h1>你好啊</h1> -->
    <!-- <person /> -->
    <!-- <computedPage /> -->
    <!-- <watchPage /> -->
    <!-- <WatchFour /> -->
    <!-- <WatchFive /> -->
    <WatchEffectTest />
  </div>
</template>

<script lang="ts">
  // 引入组件 Person
  import person from './components/Person.vue';
  import computedPage from './components/ComputedPage.vue';
  import watchPage from './components/watch/WatchPage.vue';
  // watch 情况四
  import WatchFour from './components/watch/WatchFour.vue';
  import WatchFive from './components/watch/WatchFive.vue';
  // watchEffect
  import WatchEffectTest from './components/watchEffect/WatchEffectTest.vue';
  // js 或 ts 代码
  export default {
    // 组件名
    name: 'App',
    // 注册组件
    components: { person, computedPage, watchPage, WatchFour, WatchFive, WatchEffectTest }
  };
</script>

<style>
  /*  样式 */
  .app {
    background-color: aliceblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>
